<script setup lang="ts">
  import { ref, computed, defineAsyncComponent, useAttrs } from "vue";
  import { ElDialog } from "element-plus";
  import { clo } from "@/util";
  import user from "@/components/sql/user.vue";
  import order from "@/router/order";

  type TypeElDialog = CPN<typeof ElDialog>;
  interface Props extends /* @vue-ignore */ TypeElDialog {
    appendToBody?: boolean;
    zIndex?: number;
  }
  type orderChild = (typeof order)["children"][number];
  type Types = orderChild["meta"]["title"];
  let source: any;
  const
    props = withDefaults(defineProps<Props>(), { appendToBody: true, zIndex: 2 }),
    ua = useAttrs(),
    attrs = computed(() => {
      return { ...props, ...ua };
    }),
    data = ref(),
    show = ref(false),
    disabled = ref(false),
    dialogTitle = ref(""),
    entity = ref<InstanceType<typeof user>>(),
    emit = defineEmits<{ (e: "confirm"): void; }>(),
    cmpType = ref<Types>(order.children[1].meta.title),
    curd = ref<gt.curd>(0),
    cmp = computed(() => {
      switch (cmpType.value) {
        case "消费单": return defineAsyncComponent(() => import("./user.vue"));
        case "入库单": return defineAsyncComponent(() => import("./input.vue"));
        case "出库单": return defineAsyncComponent(() => import("./output.vue"));
        // case order.children[4].meta.title: return defineAsyncComponent(() => import("./replenishment.vue"));
        // case order.children[5].meta.title: return defineAsyncComponent(() => import("./allot.vue"));
        // case order.children[6].meta.title: return defineAsyncComponent(() => import("./delivery.vue"));

        default:
          break;
      }
    });

  async function confirm() {
    if (disabled.value || await entity.value?.validate()) {
      show.value = false;
      if (curd.value != 2) {
        const d = gd.orderStock;
        let r: any;
        switch (curd.value) {
          case 0: r = await d.create(data.value); break;
          // case 1: r = d.update(Object.assign(t, { id: source.id })); break;
          case 3: r = await d.delete({ id: source.id, name: data.value.name, des: data.value.des }); break; // 红冲
          default:
            return;
        }
        console.log(r);
        if (r) {
          msg(dialogTitle.value + "成功", "success");
          emit("confirm");
        }
      }
    }
  }
  // function reset() {
  //   entity.value?.resetFields();
  //   data.value = clo(source);
  // }
  function open(method: gt.curd, value: gt.sql.orderStock, title: Types = "消费单"): void {
    cmpType.value = title;
    curd.value = method;
    dialogTitle.value = props.title || (["新增", "修改", "查看", "红冲"][curd.value] + title);
    disabled.value = curd.value > 1;
    value.type = title;
    source = value;
    data.value = clo(source);
    if (method == 3) {
      Object.assign(data.value, { name: "", des: "" });
    }
    show.value = true;
  }
  defineExpose({ open });
</script>
<template>
  <ElDialog v-if="show" class="Dialog" :="attrs" :title="dialogTitle" v-model="show">
    <component :is="cmp" v-model="data" :curd="curd" ref="entity" />
    <template v-if="!$slots.footer" #footer>
      <!-- <el-button type="success" @click="reset" v-if="!disabled">重置</el-button> -->
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </ElDialog>
</template>